﻿@page "/Calendar/Default-Functionalities"

@using Syncfusion.Blazor.Calendars

@inherits SampleBaseComponent;

<SampleDescription>
   <p>The following sample demonstrates the default functionalities of the Calendar. Today's date is always <code>highlighted</code> in the Calendar and it get <code>focused</code> if there is no selected date. Click the desired date from the Calendar.</p>
</SampleDescription>
<ActionDescription>
    <p>The <code>Calendar</code> is a graphical user interface component which provides the multi-view representation to display and select a date. Also, provide options to navigate in different levels of views like Month, Year, Decade.</p>
    <p>More information on the calendar instantiation can be found in this<a href='https://blazor.syncfusion.com/documentation/calendar/getting-started/#adding-calendar-component-to-the-application' target='_blank'> documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div class="calender-section">
        <div id="calender-control">
            <SfCalendar TValue="DateTime?" @bind-Value="@DropVal"></SfCalendar>
        </div>
        <div id="display_date">
            <span id="date_value">Selected values: @(DropVal?.ToString("M/d/yyyy"))</span>
        </div>
    </div>
</div>

<style>
    #date_label {
        display: block;
        width: 248px;
        color: rgba(0, 0, 0, 0.58);
        margin-left: 5px;
    }

    #calender-control {
        max-width: 300px;
        margin: 0 auto;
    }

    #display_date {
        max-width: 300px;
        margin: 0 auto;
        padding-top: 10px;
        color: rgba(0, 0, 0, 0.8);
    }
</style>

@code {
    public DateTime? DropVal { get; set; } = DateTime.Now;

}
